<template>
  <div class="magnet magnet-type">
    <div class="mask" v-show="dialogVisible">
      <div class="dialog-part" v-show="dialogVisible">
        <div class="dialog-top">
          <div class="tips-item">
            <img class="tips-img" src="/seeyon/portal/images/logo/tip.png" alt="" />
            <span class="tip-font">登录提示</span>
          </div>
          <span @click="dialogVisible = false" class="close-x">X</span>
        </div>
        <div class="content">
          <span class="content-txt"
            >&nbsp;&nbsp;&nbsp;&nbsp;请您先登录系统，再浏览该栏目；如您尚未获取登录账号，请点击<span
              class="red"
              >"用户注册"</span
            >。</span
          ></div
        >
        <span class="dialog-footer">
          <button class="register" @click="registerEvt">用户注册</button>
          <button class="login-btn" type="primary" @click="loginEvt">用户登录</button>
          <button class="canle" @click="dialogVisible = false" style="background-color: #b9b9b9"
            >取消</button
          >
        </span>
      </div>
    </div>
    <!-- 图片式 -->

    <ul v-if="magnetShortStyle == 'image'">
      <li
        v-for="(item, index) in magnet"
        :key="index"
        class="image-con"
        @click="doSomething(item)"
        :style="notCardStyle"
      >
        <div>
          <div
            class="magnet-image"
            :class="moreImageShow"
            :style="{
              backgroundImage:
                'url(' +
                (item.imageLayouts[0].imageId
                  ? item.imageLayouts[0].imageUrl
                  : require('../../../assets/magnet/magnet-' + ((index % 8) + 1) + '.jpg')) +
                ')'
            }"
          >
          </div>
          <div
            class="magnet-name"
            :style="doubleMagnetName"
            v-if="magnetStyle.propertyMap.showName === '1'"
          >
            <span :class="doubleFontEllipsis" :style="{ color: item.fontColor }">{{
              item.displayName
            }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 大卡片: 默认布局 -->
    <CardDefault
      :contentWidth="contentWidth"
      :magnetStyle="magnetStyle"
      :magnet="magnet"
      :swiperId="swiperId"
      :isImg="isImg"
      :doSomething="doSomething"
      v-else-if="mType == 9 && magnetStyle.isDefault"
    />
    <!-- 大卡片: 自定义布局 -->
    <CardCustom
      :contentWidth="contentWidth"
      :magnetStyle="magnetStyle"
      :magnet="magnet"
      :swiperId="swiperId"
      :isImg="isImg"
      :doSomething="doSomething"
      v-else-if="mType == 9 && !magnetStyle.isDefault"
    />
    <!-- 大卡片2 -->
    <Card2
      :contentWidth="contentWidth"
      :magnetStyle="magnetStyle"
      :magnet="magnet"
      :swiperId="swiperId"
      :isImg="isImg"
      :doSomething="doSomething"
      v-else-if="mType == 12"
    />
    <ul v-else>
      <!-- 通过改变不同class来改变磁贴样式模板 -->

      <li
        v-for="(item, index) in magnet"
        :key="index"
        :class="[container]"
        @click="doSomething(item)"
        :style="[
          {
            backgroundColor: containerBgc ? item.bgColor || magnetStyle.iconBackGroundColor : '',
            borderColor: mType == '7' || mType == '8' ? item.iconColor : ''
          },
          notCardStyle
        ]"
      >
        <div class="clearfix">
          <div
            class="magnet-icon"
            :style="{
              borderColor: mType == '7' || mType == '8' ? item.iconColor : '',
              backgroundColor:
                mType == '4' || mType == '5' || mType == '6' || mType == '7' || mType == '8'
                  ? ''
                  : item.bgColor
                  ? item.bgColor
                  : magnetStyle.iconBackGroundColor
            }"
          >
            <img
              :src="item.imageLayouts[0].imageUrl"
              :style="{
                width: 'inherit',
                height: 'inherit'
              }"
              alt=""
              srcset=""
              v-if="isImg(item)"
            />
            <i
              v-else
              class="vportal"
              :class="
                item.imageLayouts[0].imageUrl && item.imageLayouts[0].imageUrl.includes('vp-')
                  ? item.imageLayouts[0].imageUrl
                  : `vp-${item.imageLayouts[0].imageUrl.replace(/\..*$/, '').replace(/^.*\_/, '')}`
              "
              :style="{ color: item.iconColor }"
            ></i>
          </div>
          <div class="magnet-name" :style="doubleMagnetName">
            <span :class="doubleFontEllipsis" :style="{ color: item.fontColor }">{{
              item.displayName
            }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import CardCustom from './card-custom.vue';
  import CardDefault from './card-default.vue';
  import Card2 from './card2.vue';
  import emitter from '../../../utils/emitter';
  export default {
    name: 'MagnetItem',
    components: {
      CardCustom,
      CardDefault,
      Card2
    },
    props: {
      //这个控制显示的样式
      mType: {
        type: String,
        default: '1'
      },
      magnetStyle: {
        type: Object
        // default: [],
      },
      //这个为显示的数据
      magnet: {
        type: Array
      },
      magnetShortStyle: {
        type: String,
        default: 'icon'
      },
      contentWidth: {
        type: Number,
        default: 1400
      }
    },

    data() {
      return {
        dialogVisible: false,
        loginCtxPath: urlPreStr,
        containerArrays: [
          'container1', // 多彩圆形
          'container2', // 多彩方形1
          'container3', // 多彩方形2
          'container4', // 多彩矩形
          'container5', // 简约样式1
          'container6', // 简约样式2
          'container7', // 多彩卡片
          'container8', // 简约圆形
          'container9' // 简约矩形
        ],
        swiperId: `swiper${this.magnetStyle.entityId}`,
        notCardStyle: {},
        windowWidth: window.innerWidth, // 初始化窗口宽度
        windowHeight: window.innerHeight // 初始化窗口高度
      };
    },
    computed: {
      container() {
        //大小图标的两个样式要区分开
        if (this.mType == 7) {
          return this.magnetStyle.iconSize == 'small' ? 'container8-small' : 'container8-big';
        } else if (this.mType == 3) {
          return this.magnetStyle.iconSize == 'small' ? 'container4-small' : 'container4-big';
        }

        return this.containerArrays[this.mType];
      },
      //一些特殊的磁贴需要单独控制样式
      containerBgc() {
        if (this.mType == 2 || this.mType == 3 || this.mType == 6) {
          return true;
        }
        return false;
      },
      moreImageShow() {
        if (this.magnetStyle.propertyMap.imageShowType) {
          if (this.magnetStyle.propertyMap.imageShowType === 'stretch') {
            return 'moreImageSpanImgStyle2';
          } else if (this.magnetStyle.propertyMap.imageShowType === 'scalingFullImage') {
            return 'moreImageSpanImgStyle1';
          }
        }
        return '';
      },
      doubleFontEllipsis() {
        return this.magnetStyle.propertyMap.wordWrap == 'double' ? 'font-ellipsis2' : '';
      },
      doubleMagnetName() {
        if (this.magnetStyle.propertyMap.wordWrap != 'double') {
          return '';
        }

        const fixedHeightContainer = [
          'container1', // 多彩圆形
          'container2', // 多彩方形1
          'container3', // 多彩方形2
          'container6', // 简约样式2
          'container8-small', //多彩矩形 小
          'container8-big' //多彩矩形 大
        ];

        if (fixedHeightContainer.includes(this.container) || this.magnetShortStyle == 'image') {
          return {
            height: '34px'
          };
        }
        return '';
      }
    },
    mounted() {
      // console.log(this.magnet, 'magnet');
      // console.log(this.card2Magnet, 'card2Magnet');
      document.getElementsByClassName('mask')[0].style.width = window.innerWidth + 'px';
      document.getElementsByClassName('mask')[0].style.height = window.innerHeight + 'px';
      // 注册resize事件监听器
      window.addEventListener('resize', this.handleResize);
      const verticalAlignContainer = [
        'container7', // 多彩卡片
        'container3', // 多彩方形2
        'container4-small', //多彩矩形 小
        'container4-big', //多彩矩形 大
        'container5', // 简约样式1
        'container9' // 简约矩形
      ];
      this.initEllipsis2();

      if (verticalAlignContainer.includes(this.container)) {
        this.verticalAlign('.magnet-name');
      }
    },
    beforeUnmount() {
      // 移除resize事件监听器
      window.removeEventListener('resize', this.handleResize);
    },
    created() {
      let lenMag =
        this.magnet.length < parseInt(this.magnetStyle.maxColNum)
          ? this.magnet.length
          : this.magnetStyle.maxColNum;
      this.notCardStyle = {
        borderRadius:
          this.magnetStyle.borderRadius == 0 || this.magnetShortStyle == 'image'
            ? 0
            : this.magnetStyle.borderRadius + 'px'
      };
      console.log(
        this.magnetStyle.propertyMap.alignStyle,
        'this.magnetStyle.propertyMap.alignStyle'
      );
      if (this.magnetStyle.propertyMap.alignStyle == 'tiling') {
        if (
          this.mType == 8 ||
          this.mType == 3 ||
          this.mType == 4 ||
          this.magnetShortStyle == 'image'
        ) {
          let spacingW = this.magnetShortStyle == 'image' || this.mType == 4 ? 24 : 12;
          let maxWidth = parseInt((this.contentWidth - 20) / lenMag) - spacingW;
          let defaultWidth = 171;
          if (this.mType == 3 && this.magnetStyle.iconSize != 'small') {
            defaultWidth = 200;
          }
          if (this.mType == 4) {
            defaultWidth = 100;
          }
          if (this.magnetShortStyle == 'image') {
            defaultWidth = 150;
          }
          let eachWidth = maxWidth > defaultWidth ? maxWidth : defaultWidth;
          this.notCardStyle.width = parseInt(eachWidth) + 'px';
        } else {
          let selfWidth = 70;
          if (this.mType == 2) {
            selfWidth = 80;
          }
          if (this.mType == 5) {
            selfWidth = 60;
          }
          if (this.mType == 7 && this.magnetStyle.iconSize == 'big') {
            selfWidth = 100;
          }
          console.log(lenMag, 'lenMag');
          let spacing = parseInt((this.contentWidth - selfWidth * lenMag) / (parseInt(lenMag) + 1));
          console.log(spacing, 'spacing');
          this.notCardStyle.marginLeft = parseInt(spacing) + 'px';
        }
      }
      // console.log(this.magnet, 'magnet');
      console.log(this.contentWidth, 'contentWidth');
      // console.log(this.magnetShortStyle, '111');
      // console.log('大卡片iconType=9, 大卡片2是12,v-portal:magnet-type-13 noGroup');
      // console.log(this.magnetStyle, 'magnetStyle');
      // console.log(this.mType, 'mtype');
      // if (this.magnetShortStyle == 'image') {
      //   console.log(this.magnet, 'magnet magnetShortStyle image');
      // }
      // console.log(this.sliderNum, 'sliderNum');
    },
    methods: {
      handleResize() {
        console.log('屏幕缩放 :>> ');
        // 更新数据
        this.windowWidth = window.innerWidth;
        this.windowHeight = window.innerHeight;
        document.getElementsByClassName('mask')[0].style.width = window.innerWidth + 'px';
        document.getElementsByClassName('mask')[0].style.height = window.innerHeight + 'px';
      },
      // 用户注册
      registerEvt() {
        this.dialogVisible = false;
        // this.eventBus.$emit('setFlag', true)
        // emitter.publish('openFrame');
        window.open('/seeyon/ext/externalEnroll.do?method=index', '_blank');
      },
      // 用户登录
      loginEvt() {
        this.dialogVisible = false;
        // this.eventBus.$emit('setFlag', true)
        emitter.publish('openFrame');
      },
      handleClose(done) {
        this.dialogVisible = false;
      },
      doSomething(item) {
        if (item.portletUrlType == 'open') {
          if (
            item.displayName == '国家标准制修订工作管理信息系统' ||
            item.displayName == '国家市场监督管理总局' ||
            item.displayName == '全国标准信息公共服务平台' ||
            item.displayName == '国家标准全文公开' ||
            item.displayName == '国家标准化管理委员会' ||
            item.displayName == '标准验证点查询'
          ) {
            window.open(item.portletUrl);
          } else {
            this.dialogVisible = true;
          }
        }
      },
      isImg(item) {
        return item.imageLayouts
          ? item.imageLayouts[0].imageUrl && item.imageLayouts[0].imageId
          : false;
      },
      isIE() {
        var ua = window.navigator.userAgent;

        if (ua.indexOf('MSIE ') >= 0) {
          return true;
        } else {
          return ua.indexOf('Trident/') >= 0;
        }
      },
      verticalAlign(ele, isFirst) {
        ele = $(this.$el).find(ele);
        setTimeout(function () {
          $.each($(ele), function (index, item) {
            if ($(item).hasClass('is-verticalAlign')) {
              return true;
            }
            var eleHeight = $(item).height();
            var childDomHeight = 0;
            $.each($(item).children(), function (childIndex, child) {
              childDomHeight += $(child).height();
              if (isFirst) {
                return false;
              }
            });

            var paddingVer = parseInt((eleHeight - childDomHeight) / 2);
            $(item).css({
              'padding-top': paddingVer + 'px',
              'padding-bottom': paddingVer + 'px',
              'box-sizing': 'border-box'
            });
            $(item).addClass('is-verticalAlign');
          });
        }, 0);
      },
      initEllipsis2() {
        if (this.isIE()) {
          var ele = $(this.$el).find('.font-ellipsis2');
          // 汉字
          var cnPattern = /[\u4E00-\u9FA5]/;
          setTimeout(function () {
            $.each($(ele), function (index, item) {
              var _fontSize = $(item).css('fontSize');
              var _width = $(item).width();
              var _len = Math.floor((_width * 2) / parseInt(_fontSize));
              var text = $(item)
                .text()
                .replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
              var textLen = 0;
              var curLen = 0;
              $.each(text, function (i, str) {
                if (cnPattern.test(str)) {
                  textLen += 1;
                } else {
                  textLen += 0.5;
                }
                if (_len < textLen) {
                  curLen = i - 1;
                  return false;
                }
              });

              if (_len < textLen) {
                var ellipsis2Text = $(item)
                  .text()
                  .substring(0, curLen - 2);
                $(item).text(ellipsis2Text + '...');
              }
            });
          }, 0);
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  // 样式修改
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5) !important;
    opacity: 1 !important;
    justify-content: center;
    align-items: center;
  }

  .dialog-part {
    width: 710px;
    height: auto;
    background-color: #fff;
  }

  .dialog-top {
    position: relative;
    display: flex;
    height: 130px;
    background-image: linear-gradient(to right, #68c3f2, #589deb);
    align-items: center;
    justify-content: center;
  }

  .tips-item {
    display: flex;
    align-items: center;
    font-size: 30px;
    text-align: center;
  }

  .close-x {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }

  span.tip-font {
    margin-left: 20px;
    font-size: 37px;
    color: #fff;
  }

  img.tips-img {
    width: 79px;
  }

  .content {
    display: flex;
    width: 80%;
    height: 130px;
    margin: auto;
    font-size: 20px;
    line-height: 33px;
    align-items: center;
  }

  .content-text {
    margin-top: 10px;
  }

  span.dialog-footer {
    display: flex;
    width: 100%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background-color: #f8f8f8;
    justify-content: center;
    align-items: center;
  }

  .register {
    height: 35px;
    margin-right: 20px;
    color: #7b9ac7;
    cursor: pointer;
    background-color: transparent;
    border: none;
  }

  .login-btn {
    height: 35px;
    min-width: 80px;
    padding: 5px 10px;
    margin-right: 13px;
    color: #fff;
    cursor: pointer;
    background-color: #5285e6;
    border: none;
    border-radius: 7px;
  }

  .canle {
    height: 35px;
    min-width: 60px;
    min-width: 80px;
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
    background-color: #b9b9b9;
    border: none;
    border-radius: 7px;
  }

  .red {
    color: rgb(186, 7, 7);
  }

  .magnet {
    position: relative;
    overflow: hidden;

    ul {
      padding: 0;
      margin: 0;
      margin-left: 10px;
      overflow: hidden;
      list-style: none;
    }
  }

  // 图片式
  .image-con {
    position: relative;
    float: left;
    width: 150px;
    margin-right: 24px;
    margin-bottom: 18px;
    cursor: pointer;

    .magnet-image {
      width: 100%;
      height: 70px;
      //background-color: #ee759a;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .magnet-name {
      width: 100%;
      margin-top: 5px;
      overflow: hidden;
      font-size: 14px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 多彩圆形 */
  .container1 {
    float: left;
    width: 70px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0;
    cursor: pointer;

    .magnet-icon {
      width: 44px;
      height: 44px;
      margin-left: 11px;
      overflow: hidden;
      line-height: 44px;
      text-align: center;
      background: #000;
      background-color: #238fff;
      border: solid 1px rgba(255, 255, 255, 0.5);
      border-radius: 100%;

      i {
        display: block;
        font-size: 24px;
        line-height: 46px;
        color: #fff;
      }
    }

    .magnet-name {
      width: 58px;
      height: 16px;
      margin-top: 5px;
      margin-left: 5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        color: #333;
      }
    }
  }

  /* 多彩方形1 */
  .container2 {
    float: left;
    width: 70px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0;
    cursor: pointer;

    .magnet-icon {
      width: 44px;
      height: 44px;
      margin-left: 11px;
      overflow: hidden;
      line-height: 44px;
      text-align: center;
      background: #000;
      background-color: #13d06c;
      border: solid 1px rgba(255, 255, 255, 0.5);
      border-radius: 10px;

      i {
        display: block;
        font-size: 24px;
        line-height: 46px;
        color: #fff;
      }
    }

    .magnet-name {
      width: 58px;
      height: 16px;
      margin-top: 5px;
      margin-left: 5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        color: #333;
      }
    }
  }

  /* 多彩方形2 */
  .container3 {
    float: left;
    width: 150px;
    height: 110px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #000;
    background-color: #745eff;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 10px;

    .magnet-icon {
      width: 40px;
      height: 36px;
      margin: 15px auto 5px !important;
      overflow: hidden;
      font-size: 12px;
      color: #fff;
      text-align: center;

      i {
        display: block;
        font-size: 36px;
        color: #fff;
      }
    }

    .magnet-name {
      // width: 72px;
      margin-top: 5px;
      // margin-left: 11px;
      overflow: hidden;
      font-size: 16px !important;
      line-height: 36px !important;
      color: #fff;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        color: #fff;
      }
    }
  }

  /* 多彩矩形小图标 */
  .container4-small {
    position: relative;
    float: left;
    width: 195px;
    height: 50px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    // line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-color: #13d06c;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 6px;

    .magnet-icon {
      float: left;
      width: 20px;
      height: inherit;
      margin-left: 24px;
      overflow: hidden;

      i {
        display: block;
        font-size: 20px;
        line-height: 50px;
        color: #fff;
      }
    }

    .magnet-name {
      position: absolute;
      top: 0;
      right: 0;
      left: 54px;
      height: 100%;
      font-size: 14px;
      color: #fff;
      text-align: left;

      span {
        display: block;
        float: left;
        width: 100%;
        padding-right: 5px;
        overflow: hidden;
        font-size: 14px;
        color: #fff;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
    }
  }

  /* 多彩矩形大图标 */
  .container4-big {
    position: relative;
    float: left;
    width: 240px;
    height: 60px;
    margin-right: 24px;
    margin-bottom: 14px;
    overflow: hidden;
    // line-height: 60px;
    text-align: left;
    cursor: pointer;
    background-color: #13d06c;
    border-radius: 6px;

    .magnet-icon {
      float: left;
      // width: 25px;
      // height: 25px;
      // margin-top: 17px;
      margin-left: 35px;
      overflow: hidden;
      line-height: 25px;

      i {
        display: block;
        font-size: 22px;
        line-height: 60px;
        color: #fff;
      }
    }

    .magnet-name {
      float: left;
      width: 130px;
      height: 60px;
      margin-left: 10px;
      overflow: hidden;
      color: #fff;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 简约样式1 */
  .container5 {
    float: left;
    height: 34px;
    padding: 10px;
    overflow: hidden;
    cursor: pointer;

    .magnet-icon {
      float: left;
      width: 20px;
      overflow: hidden;

      i {
        font-size: 19px;
        line-height: 34px;
      }
    }

    .magnet-name {
      float: left;
      width: 72px;
      height: 34px;
      margin-left: 5px;
      overflow: hidden;
      font-size: 12px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 简约样式2 */
  .container6 {
    float: left;
    width: 72px;
    padding: 10px;
    overflow: hidden;
    cursor: pointer;

    .magnet-icon {
      width: 35px;
      height: 35px;
      margin-left: 18px;
      line-height: 35px;
      text-align: center;

      i {
        display: block;
        font-size: 32px;
      }
    }

    .magnet-name {
      width: 72px;
      height: 15px;
      margin-top: 5px;
      margin-left: 0;
      overflow: hidden;
      font-size: 12px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* 多彩卡片 */
  .container7 {
    float: left;
    width: 152px;
    height: 64px;
    margin-right: 24px;
    margin-bottom: 14px;
    cursor: pointer;
    background: #13d06c;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 6px;

    .magnet-icon {
      float: left;
      width: 36px;
      height: 36px;
      margin-top: 15px;
      margin-left: 14px;
      overflow: hidden;
      text-align: center;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 100%;

      i {
        display: block;
        font-size: 22px;
        line-height: 36px;
        color: #fff;
      }
    }

    .magnet-name {
      height: 64px;
      padding-right: 15px;
      padding-left: 64px;

      span {
        display: block;
        float: right;
        width: 100%;
        // margin-top: 22px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        color: #fff;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  /* 简约圆形大图标 */
  .container8-big {
    float: left;
    width: 100px;
    padding: 0 4px;

    .magnet-icon {
      width: 70px;
      height: 70px;
      margin: 15px auto 10px auto;
      overflow: hidden;
      line-height: 70px;
      text-align: center;
      cursor: pointer;
      background-color: #fff;
      border: 1px solid #ff6634;
      border-radius: 100%;

      i {
        display: block;
        font-size: 30px;
        line-height: 70px;
        color: #1f85ec;
      }
    }

    .magnet-name {
      width: 100%;
      height: 16px;
      margin-top: 5px;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        // display: inline-block;
        // width: 60px;
        // overflow: hidden;
        font-size: 12px;
        color: #333;
      }
    }
  }

  //简约圆形小图标
  .container8-small {
    float: left;
    width: 82px;
    padding: 10px 4px 0 4px;

    .magnet-icon {
      width: 44px;
      height: 44px;
      margin: 0 auto;
      overflow: hidden;
      line-height: 44px;
      text-align: center;
      cursor: pointer;
      background-color: #fff;
      border: 1px solid #2453b3;
      border-radius: 100%;

      i {
        display: block;
        font-size: 24px;
        line-height: 46px;
        color: #1f85ec;
      }
    }

    .magnet-name {
      width: 100%;
      height: 16px;
      margin-top: 5px;
      overflow: hidden;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        // display: inline-block;
        // width: 60px;
        // overflow: hidden;
        font-size: 12px;
        color: #333;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }

  /* 简约矩形 */
  .container9 {
    position: relative;
    float: left;
    width: 171px;
    height: 58px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #2453b3;
    border-color: #1f85ec;
    border-radius: 6px;
    box-sizing: border-box;

    .magnet-icon {
      // float: left;
      position: absolute;
      // margin-left: 24px;
      left: 24px;
      width: 20px;
      height: inherit;
      overflow: hidden;

      i {
        display: block;
        font-size: 20px;
        line-height: 56px;
        color: #1f85ec;
      }
    }

    .magnet-name {
      position: absolute;
      top: 0;
      right: 0;
      left: 54px;
      height: 56px;
      padding-right: 10px;
      font-size: 14px;
      color: #2453b3;
      text-align: left;

      span {
        position: relative;
        display: block;
        float: left;
        width: 100%;
        // padding-right: 10px;
        overflow: hidden;
        color: #1f85ec;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .clearfix::after,
  .clearfix::before {
    display: table;
    content: '';
  }

  .clearfix::after {
    clear: both;
  }

  .clearfix {
    *zoom: 1;
  }

  .moreImageSpanImgStyle1 {
    background-position: center;
    background-size: contain !important;
  }

  .moreImageSpanImgStyle2 {
    background-position: center;
    background-size: 100% 100% !important;
  }

  .font-ellipsis2 {
    position: relative;
    display: block;
    display: -webkit-box !important;
    overflow: hidden;
    line-height: 1.2 !important;
    text-overflow: inherit !important;
    word-break: break-all;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
